<template>
  <div class="user">
    <div class="user-top">
      <img
        :src="imgtop"
        alt=""
        @click="add"
      >
      <div class="span-top">
        <p>{{usertop.nickname}}</p>
        <p class="photo">{{usertop.phone}} <img
            class="img2"
            src="https://java.crmeb.net/static/images/edit.png"
            alt=""
          ></p>

      </div>
      <div class="span-a">
        <img
          :src="usertop.vipIcon"
          alt=""
        >
        <span>{{usertop.vipName}}</span>
      </div>
    </div>
    <div class="user-list">
      <div class="user-list-item">
        <router-link to="/pages/users/user_money/index">
          <div class="list-item-num">0.00</div>
          <div class="list-item-txt">余额</div>
        </router-link>

        <router-link to="/pages/users/user_integral/index">
          <div class="list-item-num">10</div>
          <div class="list-item-txt">积分</div>
        </router-link>

        <router-link to="/pages/users/user_get_coupon/index">
          <div class="list-item-num">4</div>
          <div class="list-item-txt">优惠券</div>
        </router-link>

        <router-link to="/pages/users/user_goods_collection/index">
          <div class="list-item-num">1</div>
          <div class="list-item-txt">收藏</div>
        </router-link>

      </div>
    </div>
    <dindan></dindan>
    <lunbo></lunbo>
    <wodefuwu></wodefuwu>
    <div class="user-footer">
      <img
        src="https://java.crmeb.net/static/images/support.png"
        alt=""
      >
    </div>
  </div>
</template>
<script>
import axios from "axios"
import dindan from "./dindan.vue"
import lunbo from "./lunbo.vue"
import wodefuwu from "./wodefuwu.vue"
export default {
  data() {
    return {
      usertop: [],
      authoriZation: localStorage.token,
      imgtop: [],


    }
  },
  methods: {
    async getusertop(authoriZation) {
      await axios.get("https://api.java.crmeb.net/api/front/user", {
        headers: {
          "authori-zation": authoriZation
        }
      }).then(res => {
        console.log(res.data.data);
        this.imgtop = res.data.data.avatar
        this.usertop = res.data.data
      })
    },
    add() {
      this.$router.push("/pages/users/user_info/index")
    }

  },
  created() {
    this.getusertop(this.authoriZation)

  },
  components: {
    dindan,
    lunbo,
    wodefuwu
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.user {
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(top, green 10%, #fff 50%);
  .user-top {
    padding: 20px;
    display: flex;
    align-items: center;
    color: white;
    img {
      width: 60px;
      height: 60px;

      border-radius: 50%;
    }
    .photo {
      color: #ccc;
    }
    .img2 {
      width: 15px;
      height: 15px;
      border: none;
    }
    .span-top {
      margin: 10px;
    }
  }
  .user-list-item {
    display: flex;
    justify-content: space-around;
    text-align: center;

    .list-item-num {
      font-size: 24px;
      font-weight: bold;
      color: white;
    }
    .list-item-txt {
      color: white;
      font-size: 12px;
    }
  }
  .span-a {
    width: 80px;
    height: 20px;
    margin-top: -20px;
    border-radius: 10px;
    background: rgb(53, 49, 49);
    opacity: 0.8;
    color: white;
    font-size: 12px;
    line-height: 20px;
    display: flex;
    justify-content: space-around;
    padding-right: 10px;
    img {
      width: 10px;
      height: 10px;
      margin: auto;
    }
  }
  .user-footer {
    width: 94%;
    height: 100px;
    margin: auto;
    margin-top: 10px;
    img {
      height: 50px;

      margin-left: 30%;
    }
  }
}
</style>